<template>
    <view class="margin-top-xl  x-tower-swiper">
         <view class="hw-128 x-tower-item" style="z-index: 3; margin-left: 40px; transform: scale(0.8);"> 
             <image style="border-radius: 10px;" class="hw-128" :src="swiperList[1].url"  mode="scaleToFill" /> 
        </view>

        <view class="hw-128 x-tower-item" style="z-index: 4; margin-left: 90px; transform: scale(0.9);"> 
             <image style="border-radius: 10px;" class="hw-128" :src="swiperList[2].url"  mode="scaleToFill" /> 
        </view>

        <view class="hw-128 x-tower-item" style="z-index: 5; transform: scale(1.1); "> 
             <image style="border-radius: 10px;" class="hw-128" :src="swiperList[3].url"  mode="scaleToFill" /> 
        </view>

        <!-- margin-left: (90 + 128)px;  -->
        <view class="hw-128 x-tower-item" style="z-index: 4; margin-left: 218px; transform: scale(0.9);"> 
             <image style="border-radius: 10px;" class="hw-128" :src="swiperList[4].url"  mode="scaleToFill" /> 
        </view>

         <!-- margin-left: (90 + 128 + 40 )px;  --> 
         <view class="hw-128 x-tower-item" style="z-index: 3; margin-left: 258px; transform: scale(0.8);"> 
             <image style="border-radius: 10px;" class="hw-128" :src="swiperList[5].url"  mode="scaleToFill" /> 
        </view>
   </view>
</template>
<script lang="ts" setup>
import {ref, reactive} from "vue"
const swiperList = reactive<any>([
    {id: 0,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'},
    {id: 1,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',}, 
    {id: 2,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'}, 
    {id: 3,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'}, 
    {id: 4,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'}, 
    {id: 5,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'}, 
    {id: 6,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'}
])

const systemInfo = uni.getSystemInfoSync()
const screenHeight = systemInfo.screenHeight + "px"
const screenWidth = systemInfo.screenWidth + "px"

</script>
<style scoped>
.x-tower-swiper{
    height: 256upx;
    position: relative;
    max-width: v-bind(screenWidth);
    /* overflow: hidden; */
}

.x-tower-swiper .x-tower-item{
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   border: 1px solid white;
   border-radius: 10px;
}
</style>
